<template>
  <div class="test-mid">
    <div class="test-text">
      <h4>TOMI肤质测试</h4>
      <p>本肤质测试来自美国著名皮肤科褒曼医生所著的《The SkinType Solution》</p>
      <div class="test-button">以下仅供参考</div>
    </div>
    <div class="test-img">
      <div class="img-branchOne">
        <img src="../image/skinpicture/hzp.png" alt="" />
      </div>
      <div class="img-branchTwo">
        <img src="../image/skinpicture/hzpicon.png" alt="" />
      </div>
      <div class="img-branchThree">
        <img src="../image/skinpicture/ms.png" alt="" />
      </div>
      <div class="img-mind">
        <img src="../image/skinpicture/ju.png" alt="" />
      </div>
     
      
    
    </div>
    
  </div>
</template>

<script>

export default {
    data() {
        return {};
    },
    methods: {},
   
};
</script>

<style lang="scss">
.test-mid {
  width: 750px;
  height: 298px;
  background: #e2edff;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: stretch;
  align-items: flex-start;
  .test-text {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    align-content: center;
    position: relative;
    h4 {
      width: 260px;
      height: 56px;
      font-size: 40px;
      position: relative;
      top: 12px;
      font-weight: 300;
    }
    p {
      width: 308px;
      height: 98px;
      font-size: 22px;
      color: #3333;
      position: relative;
      top: 20px;
    }
    .test-button {
      width: 246px;
      height: 70px;
      background: #87a3f7;
      border-radius: 34px 34px 34px 34px;
      font-size: 26px;
      color: #ffff;
      text-align: center;
      line-height: 70px;
    ;
      margin-top: 7rem;
    }
  }
  .test-img {
    display: flex;
    justify-content: space-evenly;
    align-content: flex-start;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: wrap;
    .img-mind {
     width: 314px;
     height:310px;
     img{
      width: 100%;
      height: 100%;
     }
      transform:translate(4.25rem,-3.375rem);
    }
    .img-branchOne {  
     width: 92px;
      height: 108px;
       img{
      width: 100%;
      height: 100%;
     }
       transform: translate(-1.25rem, 9.125rem);
    }
    .img-branchTwo {
      width: 68px;
      height: 84px;
       img{
      width: 100%;
      height: 100%;
     }
      transform: translate(-4rem, 1.125rem);
    
    }
    .img-branchThree {
      width: 60px;
      height: 60px;
       img{
      width: 100%;
      height: 100%;
     }
       transform: translate(0, 1rem);
      
    }
   
  }
}
</style>
